// 导入静态路由
import {
  constantRoutes,
  asyncRoutes
} from '@/router'
export default {
  namespaced: true,
  // vuex中的permission模块用来存放当前登录用户的所有路由： 静态路由 + 当前用户的权限路由(动态路由)
  state: {
    // 作用：用于控制左侧菜单栏的显示
    routes: constantRoutes // 所有人默认拥有静态路由
  },
  mutations: {
    // 修改路由
    setRoutes(state, newRoutes) {
      // 应该是每次更新 都应该在静态路由的基础上进行追加
      state.routes = [...constantRoutes, ...newRoutes]
    }
  },
  actions: {
    // 筛选动态权限路由
    // 触发时机：用户登录成功并获取到用户的信息后触发
    // menus: ['settings','employees',....] 从登录用户的信息的roles下的menus中的得到
    filterRoutes(context, menus) {
      // 定义空数组保存筛选的动态路由
      const routes = []
      // 找出动态路由的name属性和menus中选项匹配的路由
      menus.forEach(key => {
        routes.push(...asyncRoutes.filter(item => item.name === key))
      })
      context.commit('setRoutes', routes)
      return routes // 在添加动态路由时使用
    }
  }
}
